<template>
    <div class="Home" v-loading="loading">
        <!--       公共顶部-->
        <Top>
            <p class="title" slot="midPart">花艺学院</p>
            <i 
               v-if="inApp()"
               class="el-icon-arrow-left back" 
               slot="leftPart" 
               @click="appBack()"></i>
        </Top>
        <ul class="new_tabs" :class="[abFixed ? 'showBlock' : 'showNone',{fixed: abFixed}]">
            <li                            
                :class="{active: hotChecked === index}" 
                v-for="(item,index) in cat" 
                :key="index"
                @click="hotCat(item,1,index)"
            >{{item.cat_name}}</li>
        </ul>
        <div class="main">
            <cube-scroll
                         ref="scroll"
                         :data="hotlist"
                         :scrollEvents="scrollEventArr"
                         :options="scrollOptions"
                         @scroll="handleScroll"
                         @pulling-up="onPullingUp">
                <!--        swiper-->
                <Swiper :imgList="imgList" v-if="imgList.length>0"></Swiper>
        
                <!--菜单 旧-->
                <!-- <ul class="menu"> -->
                    <!--入门课程-->
                    <!-- <router-link 
                        :to="{path:'/titList',query:{url:'/?method=flower.index.lessonList',title:'入门课程',lession_type:1}}"
                        tag="li" 
                        class="animated flipInY" 
                        style="animationDelay:.2s">
                        <img src="../../assets/index/m1.png" alt=""><span>入门课程</span>
                    </router-link> -->
                    <!--精品课程-->
                    <!-- <router-link 
                                 :to="{path:'/titList',query:{url:'/?method=flower.index.lessonList',title:'精品课程',is_recommend:1}}" 
                                 tag="li" 
                                 class="animated flipInY" 
                                 style="animationDelay:.4s">
                        <img src="../../assets/index/m2.png" alt=""><span>精品课程</span>
                    </router-link> -->
                    <!--大师课程-->
                    <!-- <router-link  
                                 :to="{path:'/titList',query:{url:'/?method=flower.index.lessonList',title:'大师课程',lession_type:3}}"
                                 tag="li" 
                                 class="animated flipInY" 
                                 style="animationDelay:.6s">
                        <img src="../../assets/index/m3.png" alt=""><span>大师课程</span>
                    </router-link> -->
                    <!--全部分类-->
                    <!-- <li 
                        class="animated flipInY" 
                        style="animationDelay:.8s"
                        @click="$router.push('/alltype')">
                        <img src="../../assets/index/m4.png" alt=""><span>全部分类</span>
                    </li> -->
                <!-- </ul> -->

                <!--菜单 新-->
                <ul class="new_menu">
                    <router-link 
                        :to="{path:'/titList',query:{url:'/?method=flower.index.lessonList',title:'新品课程',lession_type:0,order:1}}"
                        tag="li" 
                        class="animated flipInY" 
                        style="animationDelay:.2s">
                        <p>
                            <strong>新品</strong>
                            <span>News</span>
                        </p>
                    </router-link>
                    <router-link 
                        :to="{path:'/titList',query:{url:'/?method=flower.index.lessonList',title:'入门课程',lession_type:1}}"
                        tag="li" 
                        class="animated flipInY" 
                        style="animationDelay:.4s">
                        <p>
                            <strong>入门</strong>
                            <span>Basis</span>
                        </p>
                    </router-link>
                    <router-link 
                        :to="{path:'/titList',query:{url:'/?method=flower.index.lessonList',title:'精品课程',is_recommend:1}}" 
                        tag="li" 
                        class="animated flipInY" 
                        style="animationDelay:.6s">
                        <p>
                            <strong>精品</strong>
                            <span>High-cuality</span>
                        </p>
                    </router-link>
                    <router-link 
                        :to="{path:'/titList',query:{url:'/?method=flower.index.lessonList',title:'大师课程',lession_type:3}}"
                            tag="li" 
                            class="animated flipInY" 
                            style="animationDelay:.8s">
                        <p>
                            <strong>大师</strong>
                            <span>Master</span>
                        </p>
                    </router-link>
                    <li
                        class="animated flipInY" 
                        style="animationDelay:1s"
                        @click="$router.push('/alltype')"
                    >
                        <p>
                            <strong>全部</strong>
                            <span>All</span>
                        </p>
                    </li>
                </ul>
                <!--        免费课程列表块-->
                <ClasslistA :data="{title:'免费课程',list:freeList}" v-if="freeList"></ClasslistA>
                <!--        最新课程列表块-->
                <!-- <ClasslistB :data="{title:'最新课程',list:newlist,order:1}" v-loading="newLoading"> -->
                    <!--tab插槽-->
                    <!-- <ul class="table clearfix" slot="table">
                        <li :class="{on:newChecked===index}" v-for="(item,index) in cat" :key="index" @click="newCat(item,1,index)">{{item.cat_name}}</li>
                    </ul>
                </ClasslistB> -->
                <!--        热门课程列表块-->
                <ClasslistB :data="{title:'人气推荐',list:hotlist,order:1}" class="page-last" v-loading="newLoading">
                    <!--tab插槽 旧-->
                    <!-- <ul class="table clearfix" slot="table" >
                        <li :class="{on:hotChecked===index}" v-for="(item,index) in cat" :key="index" @click="hotCat(item,1,index)">{{item.cat_name}}</li>
                    </ul> -->
                    <!--tab插槽 新-->
                    <ul class="new_tabs" slot="table" id="listTabs" :class="abFixed ? 'showNone' : 'showBlock'">
                        <li                            
                            :class="{active: hotChecked === index}" 
                            v-for="(item,index) in cat" 
                            :key="index"
                            @click="hotCat(item,1,index)"
                        >{{item.cat_name}}</li>
                    </ul>
                </ClasslistB>
            </cube-scroll>
        </div>
        <!--        底部导航-->
        <Tabbar :data="{index:1}"></Tabbar>
        <!--        全部分类-->
        <!-- <transition name="slide-fade">
<Alltype @Call="AlltypeEvent" v-show="AlltypeShow" :data="cat" v-if="cat"></Alltype>
</transition>-->
        <!--        <Alltype @Call="AlltypeEvent" v-show="AlltypeShow"></Alltype>-->
    </div>
</template>

<script>
    //导入相关组件
    import Top from '@/components/smallCom/Top'
    import Swiper from '@/components/smallCom/Swiper'
    import Tabbar from '@/components/smallCom/Tabbar'
    import ClasslistA from '@/components/homeVues/ClasslistA'
    import ClasslistB from '@/components/homeVues/ClasslistB'
    import Alltype from '@/components/homeVues/Alltype'

    //导出此组件
    export default {
        name: 'Home',
        components: {
            Top,//顶部信息组件
            Swiper,//轮播组件
            ClasslistA,//精品课程组件
            ClasslistB,//最新课程组件
            Tabbar,//底部导航组件
            Alltype,//全部分类组件
        },
        data () {
            return {
                scrollEventArr: ['scroll'],
                abFixed: false,
                loading:false,//加载动画
                imgList:[],//banner图组
                freeList:null,//免费课程列表
                newlist:null,//最新课程列表
                hotlist:null,//热门课程列表
                cat:null,//二级切换tab

                /*全部分类*/
                AlltypeShow:false,//是否显示

                newLoading:false,//最新局部请求动画
                newChecked:-1,//最新+分类默认选中

                hotLoading:false,//最热局部请求动画
                hotChecked:0,//最热+分类默认选中

                /*上拉加载*/
                scrollOptions: {
                    pullUpLoad: {
                        threshold: 20,
                        txt: {
                            more: '加载更多..',
                            noMore: '没有更多了..'
                        }
                    }
                },

                /*分页*/
                currentPage:2,//当前页
                prePage:6,//每页显示几条数据
                hot_cat_id:0,

            }
        },
        created(){
            
            this.loading = true;
            this.Posthttp('/?method=flower.index.index',{member_id:this.getMemberId()},(res)=>{
                this.loading = false;
                var data = JSON.parse(res.bodyText).data;
                this.imgList = data.banner;//更新banner图组
                this.freeList = data.free;//更新精品课程列表
                this.newlist = data.newlist;//更新最新课程列表
                this.hotlist = data.hotlist;//更新热门课程列表
                this.cat = data.cat;//更新二级切换tab
            });
        },
        methods:{
            handleScroll() {
                let top = document.getElementById('listTabs').getClientRects()[0].top
                if(top <= 46) {
                    this.abFixed = true
                }else {
                    this.abFixed = false
                }
            },
            //全部分类子组件传递事件
            AlltypeEvent(msg){
                msg.close?this.AlltypeShow=false:this.AlltypeShow=true;
            },
            //最新-分类
            newCat(item,order,index){
                if(this.newChecked === index)return;
                this.newChecked = index;
                let data = {
                    cat_id:item.cat_id,
                    keyword:'',
                    is_recommend:0,
                    order:order,
                    lession_type:0,
                    teacher_type:0,
                    page:1,
                    // 2019.6.8 接口需要，增加member_id字段，好像是用来做统计
                    member_id: this.getMemberId()
                };
                this.newLoading = true;
                this.Posthttp('/?method=flower.index.lessonList',data,(res)=>{
                    this.newLoading = false;
                    this.newlist = JSON.parse(res.bodyText).data.lession;
                });
            },
            //最热-分类
            hotCat(item,order,index){
                // 旧
                // let cat_id = 0;
                // if(this.hotChecked === index){
                //     this.hotChecked = -1;
                //     cat_id = 0;
                // }else{
                //     this.hotChecked = index;
                //     cat_id = item.cat_id;
                // }

                // let data = {
                //     cat_id:cat_id,
                //     keyword:'',
                //     is_recommend:0,
                //     order:order,
                //     lession_type:0,
                //     teacher_type:0,
                //     page:1,
                // };
                // this.hotLoading = true;
                // this.Posthttp('/?method=flower.index.lessonList',data,(res)=>{
                //     this.hotLoading = false;
                //     this.hotlist = JSON.parse(res.bodyText).data.lession;
                //     //分页当前页重置
                //     this.currentPage = 2;
                //     //储存最热分类 id
                //     this.hot_cat_id = cat_id;
                // });

                // 新
                if(this.hotChecked === index) return;
                this.hotChecked = index;
                let data = {
                    cat_id: item.cat_id,
                    keyword: '',
                    is_recommend: 0,
                    order: order,
                    lession_type: 0,
                    teacher_type: 0,
                    page: 1,
                    member_id: this.getMemberId()
                };
                this.hotLoading = true;
                this.Posthttp('/?method=flower.index.lessonList',data,(res)=>{
                    this.hotLoading = false;
                    this.hotlist = JSON.parse(res.bodyText).data.lession;
                    //分页当前页重置
                    this.currentPage = 2;
                    //储存最热分类 id
                    this.hot_cat_id = item.cat_id;
                });
            },
            //加载更多 (最热课程 order=2)
            onPullingUp(){
                let data = this.routeData()
                data.member_id = this.getMemberId()
                data.page = this.currentPage;//当前页
                data.order = 2;//最热课程
                data.cat_id = this.hot_cat_id;//分类id
                this.Posthttp('/?method=flower.index.lessonList',data,(res)=>{
                    let Dlength = JSON.parse(res.bodyText).data.lession.length;
                    if(Dlength>0){
                        this.currentPage++;
                        this.hotlist = this.hotlist.concat(JSON.parse(res.bodyText).data.lession)
                    }else{
                        this.$refs.scroll.forceUpdate()
                    }
                })
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Home {
        background-color: #f2f2f2;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        // .menu{
        //     width: 100%;
        //     background-color: #fff;
        //     height: 1.8rem;
        //     display: flex;
        //     overflow-x: hidden;
        //     li{
        //         width: 25%;
        //         display: flex;
        //         flex-direction: column;
        //         justify-content: center;
        //         text-align: center;
        //         img{
        //             width: .75rem;
        //             height: .75rem;
        //             display: inline-block;
        //             margin:0 auto;
        //             transition: all .5s;
        //             &:hover{
        //                 transform: rotateY(-180deg);
        //             }
        //         }
        //         span{
        //             margin-top: .3rem;
        //             color: #333333;
        //             font-size: .24rem;
        //         }
        //     }
        // }
        .showNone {
            display: none;
        }
        .showBlock {
            display: flex;
        }
        .new_tabs {
            display: flex;
            border-bottom: 1px solid #eee;           
            box-sizing: border-box;
            height: .88rem;
            padding: 0 .16rem;
            line-height: .88rem;
            li {
                margin-right: .4rem;
                font-size: .24rem;
                &.active {
                    border-bottom: .04rem solid #de6940;
                    color: #de6940;
                    font-weight: bold;
                }
            }
        }
        .fixed {
            position: fixed;
            top: .8rem;
            left: 0;
            right: 0;
            z-index: 999;
            background-color: white;
        }
        .new_menu {
            display: flex;
            background-color: white;
            li {
                &:not(:last-of-type) {
                    border-right: .5px solid #ddd;
                }
                border-bottom: .5px solid #ddd;
                width: 20%;
                box-sizing: border-box;
                height: 1.34rem;
                display: flex;
                justify-content: center;
                align-items: center;
                p {
                    display: flex;
                    overflow: hidden;
                    flex-direction: column;
                    justify-content: center;
                    strong {
                        padding-top: 2px;
                        text-align: center;
                        font-size: .26rem;
                        color: #222;
                        margin-bottom: .14rem;
                    }
                    span {
                        font-size: .18rem;
                        color: #999;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        padding: 0 .1rem .05rem;
                    }
                }
            }
        }
        .page-last{
            padding-bottom: .5rem;
        }
        .bannerTip{
            text-align: center;
            font-size: .3rem;
            height: 2rem;
            line-height: 2rem;
            color: #eb5b29;
        }
    }
</style>
